<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA2PHg69w39f3e6FTyUN1OghT1jUvRTuyeQypuF3_r31iGUNwNoRTPCx7X-NHXr8fkXTzif6OK6GBb6g"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.enableScrollWheelZoom();
        map.enableGoogleBar();
        
        GEvent.addListener(map, "click", function(overlay,  latlng,  overlaylatlng){

            lat = document.getElementById("PuntoLat");
            lng = document.getElementById("PuntoLng");
            form = document.getElementById("Punto");
            lat.value = latlng.lat();
            lng.value = latlng.lng();
            form.submit();

        });



        map.setCenter(new GLatLng(6.23609166666666666666, -75.60467500000000000000), 15);

        var points = [];
        {% for point in points %}
        points.push(new GLatLng({{point.latitude}},{{point.longitude}}));
        {% endfor %}
        
        polyline = new GPolyline(points,"#FF0000",4,.5);
        map.addOverlay(polyline);

      }
    }


    //]]>
    </script>
  </head>



  <body onload="load()" onunload="GUnload()">


  <div id="map" style="width: 100%; height: 500px"></div>

  <form id="Punto" method="POST" action="./prueba/">
    <input id="PuntoLat" type="hidden" name="latitude">
    <input id="PuntoLng" type="hidden" name="longitude">
  </form>

  </body>
</html>
